import { t } from 'i18next'
import React, { useMemo } from 'react'
import PopupMeetingWin from './PopupWin'
import PopupUserWin from './PopupUserWin'
import { Button, Message, Modal, Trigger } from '@kedacom/react-next'
import { Utils } from './utils'
import { FileIcon, Wrap, WrapBody, WrapFooter, WrapBG } from './style'
import { useStore } from '@/components/ShareModal/store'
import { MeetingEntity } from '../interfaces/meeting'
import Alert, { confirmModal } from '@/components/Alert'
import Icon from '@/components/Icon'
import { useGlobalStore } from '@/store/global'
import { fetchSetCookie } from '@/api/global'
import { MEETING_JUMP_URL } from '@/utils/constant'
import useCheckAuthentication from '@/components/AuthenticationCheck/useCheckAuthentication'
import AuthenticationCheck from '@/components/AuthenticationCheck'
import { fetchEndMeeting } from '@/api/myMeeting'
import { Avatar } from '@/components/Avatar'
import shallow from 'zustand/shallow'
import { getMeetingTime } from '@/utils'

export interface MeetingCardProps {
	className?: string
	entity: MeetingEntity
	orderArr: [number, number]
}
/*
常量定义： 大写字母 _ 拼接
*/
const QT_MEETING = 'qtmeeting' //量子会议
const AES_MEETING = 'aesmeeting' //AES加密会议
const GM_MEETING = 'gmeeting' //国密加密会议
/*
组件的使用

{meetingList.map((meeting, index) => {
	return (
		<MeetingCard key={index} entity={meeting} orderArr={[index, meetingList.length]}></MeetingCard>
	)
})}
*/
export function MeetingCard(props: MeetingCardProps) {
	const { user, SWITCH } = useGlobalStore((state) => ({ user: state.user, SWITCH: state.SWITCH }), shallow)
	const update = useStore((state) => state.update)
	const {
		run: checkAuthentication,
		open: isAuthenticationOpen,
		setOpen: setIsAuthenticationOpen,
		successFn,
	} = useCheckAuthentication()

	const getOrganigerInfo = () => {
		var meeting = props.entity
		var organiger = meeting.organiger.trim()
		var organigerExtNum = meeting.organigerExtNum.trim()
		var organigerMobile = meeting.organigerMobile.trim()
		if (organigerExtNum || organigerMobile) {
			var slash = organigerExtNum && organigerMobile ? '/' : ''
			var organigerInfo = organiger + '( ' + organigerExtNum + slash + organigerMobile + ' )'
			return (
				<div className="text ellipsis" title={`${organigerInfo}`}>
					{organiger}({organigerExtNum}
					{slash}
					{organigerMobile})
				</div>
			)
		} else {
			return (
				<div className="text ellipsis" title={`${organiger}`}>
					{organiger}
				</div>
			)
		}
	}
	/*
	# useMemo

	## 什么是 useMemo？
	useMemo 是 React 中的一个 Hook，它可以用来缓存计算结果，并在后续的渲染中重复利用这些计算结果。
	useMemo 接收两个参数：一个函数和一个依赖数组。
	当依赖数组中的任何一个值发生变化时，useMemo 会重新执行传入的函数，并返回新的计算结果。


	## 为什么需要 useMemo？
	在 React 应用中，渲染组件是一个非常消耗资源的操作。
	如果在每次渲染时都进行一些昂贵的计算，就会导致应用的性能下降。
	为了避免这种情况，我们可以使用 useMemo 来缓存计算结果。
	这样，在后续的渲染中，只要依赖数组不发生变化，就可以直接使用缓存的计算结果，从而提高了组件的渲染性能。

	## 语法
	使用 useMemo 非常简单。首先，我们需要编写一个计算函数，然后将其作为第一个参数传递给 useMemo。例如：

	```tsx
	import React, { useMemo } from 'react';

	function MyComponent() {
		const result = useMemo(() => {
			// 计算过程
			return value;
		}, [dep1, dep2]);

		// 渲染组件
		return (
			<div>{result}</div>
		);
	}
	```


	在上面的代码中，我们编写了一个计算函数，并将其作为第一个参数传递给 useMemo。
	useMemo 还接收一个依赖数组作为第二个参数，其中包含了需要监视变化的变量。

	当 dep1 或 dep2 发生变化时，useMemo 会重新执行计算函数，返回新的计算结果。
	如果 dep1 和 dep2 没有发生变化，则直接使用缓存的计算结果。


	## 如何使用 useMemo？	
	### 使用前：
	```
	import React, { useMemo, useState } from "react";

	export const EgOfUseMemo: React.FC = () => {
		const [userInfo , setUserInfo] = useState({
			name: 'nobody',
			gender: 'male'
		})
		
		const formatGender = (gender) => {
			console.log('调用了翻译性别的方法')
			return gender === 'male' ? '男' : '女'
		}
		const handleClick = () => {
			setUserInfo({
			...userInfo,
			name: 'lvxiaobu'
			})
		}
		// 优化前，不使用useMemo的情况下，修改其他属性，也会重新调用formatGender方法，浪费计算资源
		// 每次点击按钮，都会调用一次formatGender方法
		const gender = formatGender(userInfo.gender)
	
		return (
			<div>
			姓名： {userInfo.name} -- 性别:  { gender } <br/>
			<button onClick={handleClick}> 点击修改名字</button>
			</div>
		)
	}

	```
	不使用useMemo的情况下，修改其他属性，也会重新调用formatGender方法，浪费计算资源

	### 使用后：
	```
	import React, { useMemo, useState } from "react";

	export const EgOfUseMemo: React.FC = () => {
		const [userInfo , setUserInfo] = useState({
			name: 'nobody',
			gender: 'male'
		})
	
		const formatGender = (gender) => {
			console.log('调用了翻译性别的方法')
			return gender === 'male' ? '男' : '女'
		}
		const handleClick = () => {
			setUserInfo({
			...userInfo,
			name: 'lvxiaobu'
			})
		}
		// 优化后，修改其他属性，不会重新调用formatGender方法，性能提升
		// // 每次点击按钮，都不会调用formatGender方法
		const gender = useMemo(() => {
			return formatGender(userInfo.gender)
		}, [userInfo.gender])
	
		return (
			<div>
			姓名： {userInfo.name} -- 性别:  { gender } <br/>
			<button onClick={handleClick}> 点击修改名字</button>
			</div>
		)
	}
	```

	# 总结
	本文我们浅谈了 useMemo 函数，了解到它可以帮助我们缓存计算结果，提高了组件的渲染性能。
	要使用 useMemo，我们需要提供一个计算函数，并指定需要监视变化的依赖数组。
	这样，只要依赖数组不发生变化，就可以直接使用缓存的计算结果，从而避免了重复进行昂贵的计算操作。

	# useMemo和useCallback的区别及使用场景
	- useMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态
	- useCallback 缓存的结果是函数，
	主要用于缓存函数，应用场景如需要缓存的函数，
	因为函数式组件每次任何一个state发生变化，会触发整个组件更新，
	一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费；

	另外还需要注意的是，useCallback应该和React.memo配套使用，缺了一个都可能导致性能不升反而下降。

	*/
	const meetingEncryptionType = useMemo(() => {
		//是会议类型
		if (props.entity.quantumEncryption === 1) {
			//量子
			return QT_MEETING
		} else if (props.entity.encryptedType === 2) {
			return AES_MEETING
		} else if (
			(props.entity.encryptedType === 3 || props.entity.encryptedType === 4) &&
			props.entity.quantumEncryption === 0
		) {
			return GM_MEETING
		}
		return ''
	}, [props.entity.quantumEncryption, props.entity.encryptedType])
	/*
	handleShare 分享会议
	*/
	const handleShare = () => {
		update({
			meetingInfo: {
				name: props.entity.meetingName,
				meetingMoid: props.entity.meetingMoid,
				duration: Number(props.entity.duration),
				startTime: props.entity.startTime,
				e164: props.entity.e164,
			},
			type: 'meeting',
			open: true,
		})
	}
	/*
	handleFileSpace 会议空间
	*/
	const handleFileSpace = () => {
		if (!user?.enable_meeting) {
			Alert(t('无会议管理权限，请通知管理员'))
			return
		}
		if (props.entity.state === 10 || props.entity.state === 11) {
			Alert(t('会议数据恢复异常，请结束会议后重新召开。'))
			return
		}
		/*
		fetchSetCookie  api接口：跨级建云，需要预请求设置cookie标识
		*/
		fetchSetCookie({ meeting_moid: props.entity.meetingMoid, type: 1 }, function () {
			window.open(MEETING_JUMP_URL + `/meeting/meetingSpace/${props.entity.meetingMoid}`)
		})
	}
	/*
	closeMt  结束会议

	closeMt('' + props.entity.meetingMoid, props.entity.e164)
	*/
	const closeMt = (mId: string, e164?: string) => {
		/*
		const run = (meetingMoid: string, callback?: (val: boolean) => void) => {
			......
		}
		*/
		checkAuthentication('' + props.entity.meetingMoid, (authenticationPassed) => {
			if (!authenticationPassed) return
			confirmModal({
				msg: <div>{t('您确定要结束该会议吗？')}</div>,
				onOk: () => {
					let loading = Message.loading(t('正在处理，请稍候……'))
					fetchEndMeeting(e164 ?? '', 0).then((res) => {
						if (res.success) {
							setTimeout(() => {
								loading.hide()
								/*
								结束会议，刷新页面
								*/
								window.location.href = window.location.href
							}, 1500)
						} else {
							loading.hide()
							Alert(t('结束会议失败，请刷新后重试。'), () => {
								window.location.href = window.location.href
							})
						}
					})
				},
			})
		})
	}
	return (
		<>
			<Wrap className={props.className}>
				<WrapBG
					className={
						meetingEncryptionType === GM_MEETING
							? 'gm_meeting_bg'
							: meetingEncryptionType === AES_MEETING
							? 'aes_meeting_bg'
							: 'hidden'
					}
				></WrapBG>
				<WrapBody>
					<div className="main-left">
						<div
							className="meeting-card-body-line"
							style={{ lineHeight: '28px', height: '28px', fontSize: '14px' }}
						>
							<span>{props.entity.meetingCategory === 1 ? '[VCS]' : ''}</span>
							{props.entity.superMtNum > 0 && (
								<span style={{ paddingRight: '4px' }}>[{t('超大方')}]</span>
							)}
							{props.entity.maxJoinedMt !== 192 ? (
								<span style={{ paddingRight: '4px' }}>
									[{t('{{maxJoinedMt}}方', { maxJoinedMt: props.entity.maxJoinedMt })}]
								</span>
							) : null}
							<span title={props.entity.meetingName} className="nameSpan">
								{props.entity.meetingName}
							</span>
							{!!user?.enable_meeting || props.entity.state === 10 || props.entity.state === 11 ? (
								<Trigger
									popup={<PopupMeetingWin meetingMoid={props.entity.meetingMoid} />}
									popupAlign={{
										points:
											props.orderArr[1] > 4 && props.orderArr[1] - props.orderArr[0] <= 2
												? ['tl', 'bl']
												: ['bl', 'tl'],
									}}
								>
									<span className="link-btn">{t('详情')}</span>
								</Trigger>
							) : (
								<span
									className="link-btn"
									onClick={() => {
										const user = useGlobalStore.getState().user
										if (!user?.enable_meeting) {
											Alert(t('无会议管理权限，请通知管理员'))
											return false
										}
										if (props.entity.state === 10 || props.entity.state === 11) {
											Alert(t('会议数据恢复异常，请结束会议后重新召开。'))
											return
										}
									}}
								>
									{t('详情')}
								</span>
							)}
							{!!SWITCH.share && (
								<span
									className="link-btn"
									onClick={() => {
										/*
										onClick 的时候

										if 不满足的  return 
										满足条件可以执行函数 handleShare()
										*/
										if (!user?.enable_meeting) {
											Alert(t('无会议管理权限，请通知管理员'))
											return
										}
										if (props.entity.state === 10 || props.entity.state === 11) {
											Alert(t('会议数据恢复异常，请结束会议后重新召开。'))
											return
										}
										handleShare()
									}}
								>
									{t('分享')}
								</span>
							)}
						</div>
						<div className="meeting-card-body-line">
							<span style={{ paddingRight: '4px' }}>
								{t('会议号码（{{e164}}）', { e164: props.entity.e164 })}
							</span>
						</div>
						<div className="meeting-card-body-line">
							{getMeetingTime(
								props.entity.startTime,
								parseInt(props.entity.duration || '0'),
								parseInt(props.entity.duration || '0') === 0
							)}
						</div>
						{props.entity.meetingRoom && props.entity.meetingRoom.length > 0 && (
							<div className="meeting-card-body-line">
								<span
									className="ellipsis"
									style={{ paddingRight: '4px' }}
									title={props.entity.meetingRoom.join('、')}
								>
									{props.entity.meetingRoom.join('、')}
								</span>
							</div>
						)}
						<div className="meeting-card-body-line">
							<div style={{ paddingRight: '4px', width: '100%' }}>{getOrganigerInfo()}</div>
						</div>
						{!!SWITCH.meetingSpace && (
							<div
								className="meeting-card-body-line"
								id={props.entity.meetingMoid.toString()}
								style={{ height: '30px', alignItems: 'center' }}
							>
								<span style={{ paddingRight: '4px' }}>{t('会议空间')}</span>
								<FileIcon onClick={handleFileSpace}>
									<Icon></Icon>
								</FileIcon>
							</div>
						)}
					</div>
					<div className="fixed-right">
						<div className="fixed-right-line quantumEncryption-line" style={{ marginTop: '10px' }}>
							{meetingEncryptionType === QT_MEETING && (
								<Icon className="quantumEncryption qtmeeting " title={t('量子加密')}></Icon>
							)}
							{meetingEncryptionType === AES_MEETING && (
								<Icon className="quantumEncryption aesmeeting " title={t('aes加密')}></Icon>
							)}
							{meetingEncryptionType === GM_MEETING && (
								<Icon className="quantumEncryption gmeeting " title={t('国密加密')}></Icon>
							)}
							{props.entity.cascadeMeeting === true && (
								<Icon className="quantumEncryption cmeeting " title={t('级联会议')}></Icon>
							)}
							<Icon className="quantumEncryption vmeeting " title={t('视频会议')}></Icon>
						</div>
						{parseInt(props.entity.mtSize || '0') > 0 && (
							<div className="fixed-right-line">
								{t('共{{num}}位与会方', { num: props.entity.mtSize })}
							</div>
						)}
						<div className="fixed-right-line">
							{[...props.entity.mt].reverse().map((mt, index) => {
								var user = mt
								user['portrait'] =
									mt.portrait32 && mt.portrait32.length > 0
										? mt.portrait32
										: Utils.onErrorBySize(mt.accountType, 32)
								return mt.moid.length > 0 && !!SWITCH.userPopUp ? (
									<Trigger
										key={index}
										trigger="hover"
										popup={<PopupUserWin moid={mt.moid} key={index}></PopupUserWin>}
										popupAlign={{
											points:
												props.orderArr[0] <= 1
													? props.orderArr[0] % 2 === 0
														? ['bl', 'tl']
														: ['br', 'tr']
													: props.orderArr[0] % 2 === 0
													? ['tl', 'bl']
													: ['tr', 'br'],
											offset:
												props.orderArr[0] <= 1
													? props.orderArr[0] % 2 === 0
														? [10, -20]
														: [-10, -20]
													: props.orderArr[0] % 2 === 0
													? [10, -5]
													: [-10, -5],
										}}
									>
										<div className="mt-each" key={index}>
											<div className="mt-each-header">
												<Avatar value={user}></Avatar>
											</div>
											<div className="mt-each-name">{mt.name}</div>
										</div>
									</Trigger>
								) : (
									<div className="mt-each" key={index}>
										<div className="mt-each-header">
											<Avatar value={user}></Avatar>
										</div>
										<div className="mt-each-name">{mt.name}</div>
									</div>
								)
							})}
						</div>
					</div>
				</WrapBody>
				<WrapFooter className="meeting-card-footer">
					{props.entity.state === 8 ? (
						<>
							<div className="notice">{t('异常恢复中，请稍后刷新。')}</div>
							<Button
								className="btn"
								onClick={() => {
									if (!user?.enable_meeting) {
										Alert(t('无会议管理权限，请通知管理员'))
										return
									}
									closeMt('' + props.entity.meetingMoid, props.entity.e164)
								}}
							>
								{t('结束会议')}
							</Button>
						</>
					) : (
						<>
							<Button
								className="btn"
								onClick={() => {
									if (!user?.enable_meeting) {
										Alert(t('无会议管理权限，请通知管理员'))
										return
									}
									if (props.entity.state === 10 || props.entity.state === 11) {
										Alert(t('会议数据恢复异常，请结束会议后重新召开。'))
										return
									}
									checkAuthentication('' + props.entity.meetingMoid, (authenticationPassed) => {
										if (!authenticationPassed) return
										fetchSetCookie(
											{
												meeting_moid: props.entity.meetingMoid,
												type: 1,
											},
											() => {
												window.location.href =
													MEETING_JUMP_URL + '/mcc/manager/' + props.entity.meetingMoid
											}
										)
									})
								}}
							>
								{t('会场管理')}
							</Button>
							<Button
								className="btn"
								onClick={() => {
									if (!user?.enable_meeting) {
										Alert(t('无会议管理权限，请通知管理员'))
										return
									}
									closeMt('' + props.entity.meetingMoid, props.entity.e164)
								}}
							>
								{t('结束会议', { context: 'SC1' })}
							</Button>
						</>
					)}
				</WrapFooter>
				<AuthenticationCheck
					open={isAuthenticationOpen}
					setOpen={setIsAuthenticationOpen}
					callBack={successFn}
				/>
			</Wrap>
		</>
	)
}
